<template>
  <div id="settings_root">
    <h3>查询条件</h3>
    <el-row :gutter="20">
      <el-col :span="8" :offset="0">
        <el-input v-model.trim="filtTypeName" placeholder="请输入类型名称" size="normal" clearable></el-input>
      </el-col>
      <el-col :span="4" :offset="0">
        <el-select v-model="filtRepairWay" placeholder="请选择派单方式" clearable>
          <el-option v-for="item in repairWays" :key="item.statusCd" :label="item.name" :value="item.statusCd">
            {{ item.name }}
          </el-option>

        </el-select>
      </el-col>
      <el-col :span="5" :offset="0">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-button type="primary" size="small" @click="reloadTable">查询</el-button>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-button type="primary" size="small" @click="doReset">重置</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <hr>
    <div>
      <h3 id="setting_label">报修设置</h3>
      <el-button id="btn_add" type="primary" size="small" @click="showAddForm">+添加</el-button>
    </div>
    <br />
    <el-table :data="tableData" border stripe width="100%">
      <el-table-column prop="repairTypeName" label="类型名称" >
      </el-table-column>
      <el-table-column prop="repairSettingType" label="报修设置类型" >
      </el-table-column>
      <el-table-column prop="repairWay" label="派单方式"  >
      </el-table-column>
      <el-table-column prop="publicArea" label="公共区域" >
      </el-table-column>
      <el-table-column prop="returnVisitFlag" label="是否回访" >
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"  >
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showUpdateForm(scope.row.settingId)">修改</el-button>
          <el-button type="primary" size="mini" @click="doBindStaff(scope.row.settingId)">绑定维修师傅</el-button>
          <el-button type="danger" size="mini" @click="doDelete(scope.row.settingId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <paging ref="pager" :doQuery="doQuery"></paging>





    <!-- 添加setting对话框 -->

    <el-dialog :modal-append-to-body="true" :title="formTitle" :visible.sync="inputFormVisible" width="50%"
      @close="closeForm('add')">
      <el-form :model="inputFormContent" ref="formAdd" label-width="100px" :inline="false" size="normal">
        <el-form-item label="类型名称">
          <el-input v-model.trim="inputFormContent.repairTypeName" placeholder="必填,请填写类型名称"></el-input>
        </el-form-item>
        <el-form-item label="报修设置类型">
          <el-select v-model="inputFormContent.repairSettingType" placeholder="必填，选择报修类型" clearable>
            <el-option v-for="item in repairSettingType" :key="item.statusCd" :label="item.name" :value="item.statusCd">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="派单方式" size="normal">
          <el-select v-model="inputFormContent.repairWay" placeholder="必填，选择派单方式" clearable>
            <el-option v-for="item in repairWays" :key="item.statusCd" :label="item.name" :value="item.statusCd">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公共区域" size="normal">
          <el-select v-model="inputFormContent.publicArea" placeholder="必填,选择是否公共区域" clearable>
            <el-option :key="'F'" label="否" :value="'F'"></el-option>
            <el-option :key="'T'" label="是" :value="'T'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回访设置" size="normal">
          <el-select v-model="inputFormContent.returnVisitFlag" placeholder="回访设置" clearable>
            <el-option v-for="item in returnVisitFlags" :key="item.statusCd" :label="item.name" :value="item.statusCd">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" size="normal">
          <el-input v-model.trim="inputFormContent.remark" placeholder="选填,请填写说明" size="normal" clearable></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="closeForm('add')">取消</el-button>
        <el-button type="primary" @click="doFormSubmit">确认</el-button>
      </span>
    </el-dialog>


  </div>
</template>




<script>
import paging from "../../components/paging.vue"
import { mapGetters } from 'vuex'
import service from '../../utils/request'
export default {
  name: 'Dashboard',
  components: {
    paging
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      tableData: [],
      inputFormVisible: false,
      repairWays: [],
      filtTypeName: "",
      filtRepairWay: "",
      formTitle:"",
      repairSettingType: [],
      returnVisitFlags: [],
      currentSettingId: "",
      isUpdate: false,
      inputFormContent: {
        "publicArea": "",
        "remark": "",
        "repairSettingType": "200",
        "repairTypeName": "",
        "repairWay": "300",
        "returnVisitFlag": "003"
      }
    }
  },
  mounted: function () {
    this.$refs.pager.reload()
    service({
      url: "/dict/r_repair_setting/repair_way",
      method: "get"
    }).then(res => {
      this.repairWays = res
    })
    service({
      url: "/dict/r_repair_setting/repair_setting_type",
      method: "get"
    }).then(
      res => {
        this.repairSettingType = res
      }
    )
    service({ url: "/dict/r_repair_setting/return_visit_flag", method: "get" }).then(res => { this.returnVisitFlags = res })
  },
  methods: {
    closeForm(type) {
      if (type === 'add') {
        this.inputFormVisible = false
      }
    },
    reloadTable() {
      this.$refs.pager.reload()
      this.$refs.pager.reload()
      this.$refs.pager.reload()
      this.$refs.pager.reload()
      this.$refs.pager.reload()
      this.$refs.pager.reload()
    },
    //请求获取列表
    doQuery(pageNum, pageSize) {

      var params1 = { pageNum: pageNum, pageSize: pageSize }
      if (this.filtTypeName.length > 0) {
        params1["typeName"] = this.filtTypeName
      }
      if (this.filtRepairWay.length > 0) {
        params1["repairWay"] = this.filtRepairWay
      }
      service({
        url: "/setting",
        params: params1,
        method: "get",
      })
        .then(res => {
          this.tableData = res.data
          this.$refs.pager.setMaxRows(res.maxRows)
        })
        .catch(err => {
          console.error(err);
        })
    },
    doReset() {

    },
    doUpdateSetting() {

    },
    doFormSubmit(isUpdate) {
      if (isUpdate) {
        service({
          url: "/setting/" + this.currentSettingId,
          method: "post",
          headers: { 'Content-Type': 'application/json;charset=UTF-8' },
          data: JSON.stringify(this.inputFormContent)
        }).then(res => {
          if (res.code === 201) {
            alert("修改成功")
            this.closeForm()
            this.reloadTable()
          }
        })
      } else {
        service({
          url: "/setting",
          method: "post",
          headers: { 'Content-Type': 'application/json;charset=UTF-8' },
          data: JSON.stringify(this.inputFormContent)
        }).then(res => {
          alert("添加成功")
          this.inputFormVisible = false;
          this.reloadTable()
        }).catch(res => {
          console.log(res)
        })
      }
    },
    showUpdateForm(settingId) {
      this.currentSettingId = settingId
      this.inputFormVisible = true;
      this.formTitle = "修改"
      this.isUpdate = true;
      //回填
      service({
        url: "/setting/" + settingId,
        method: "get"
      }).then(res => {
        for (let i in res) {
          this.inputFormContent[i] = res[i];
        }
      })
    },
    doBindStaff(settingId) {

    },
    showAddForm() {
      this.formTitle = "添加"
      this.isUpdate = false;
      this.inputFormVisible = true;
    },
    doDelete(settingId) {
      service({
        url: "/setting",
        method: "delete",
        params: { settingId: settingId }
      }).then(res => {
        if (res.code === 204) {
          alert("删除成功")
          this.reloadTable()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#settings_root {
  padding: 20px
}

#setting_label {
  display: inline;
}

#btn_add {
  position: absolute;
  right: 20px;
}

tr button {
  padding: 10px !important;
}
</style>
